import React, {Component, Fragment} from 'react';
import { Card, Button, Modal } from 'antd';

import './ui.less';

class Modals extends Component {

    state = {
        showModal1: false,
        showModal2: false,
        showModal3: false,
        showModal4: false,
    };

    handleOpenModalClick = (type) => {
        this.setState({
            [type]: true
        });
    };

    handleCatInfoClick = (type) => {
        Modal[type]({
            title: type,
            okText: '确定',
            content: '你确定不确定就确定！！！'
        });
    };


    render() {
        return (
            <Fragment>
                <Card title={'基础模态框'} className={'card-wrap'}>
                    <Button type={'primary'} onClick={() => this.handleOpenModalClick('showModal1')}>打开</Button>
                    <Button type={'primary'} onClick={() => this.handleOpenModalClick('showModal2')}>自定义页脚</Button>
                    <Button type={'primary'} onClick={() => this.handleOpenModalClick('showModal3')}>自定义顶部距离</Button>
                    <Button type={'primary'} onClick={() => this.handleOpenModalClick('showModal4')}>水平垂直居中</Button>
                </Card>
                <Card title={'信息确认框'} className={'card-wrap'}>
                    <Button type={'primary'} onClick={() => this.handleCatInfoClick('info')}>Info</Button>
                    <Button type={'primary'} onClick={() => this.handleCatInfoClick('success')}>Success</Button>
                    <Button type={'primary'} onClick={() => this.handleCatInfoClick('confirm')}>Confirm</Button>
                    <Button type={'primary'} onClick={() => this.handleCatInfoClick('warning')}>Warning</Button>
                    <Button type={'primary'} onClick={() => this.handleCatInfoClick('error')}>Error</Button>
                </Card>
                <Modal
                    title={'确认按钮'}
                    visible={this.state.showModal1}
                    onCancel={() => {
                        this.setState({showModal1: false})
                    }}
                    onOk={() => {
                        this.setState({showModal1: false})
                    }}
                >
                    您真的确定么？ 是否是三思后的操作？
                </Modal>
                <Modal
                    title={'确认按钮'}
                    visible={this.state.showModal2}
                    onCancel={() => {
                        this.setState({showModal2: false})
                    }}
                    onOk={() => {
                        this.setState({showModal2: false})
                    }}
                    okText={'好的'}
                    cancelText={'算了'}
                >
                    您真的确定么？ 是否是三思后的操作？
                </Modal>
                <Modal
                    title={'确认按钮'}
                    visible={this.state.showModal3}
                    onCancel={() => {
                        this.setState({showModal3: false})
                    }}
                    onOk={() => {
                        this.setState({showModal3: false})
                    }}
                    okText={'好的'}
                    cancelText={'算了'}
                    style={{top: '20px'}}
                >
                    您真的确定么？ 是否是三思后的操作？
                </Modal>
                <Modal
                    title={'确认按钮'}
                    visible={this.state.showModal4}
                    onCancel={() => {
                        this.setState({showModal4: false})
                    }}
                    onOk={() => {
                        this.setState({showModal4: false})
                    }}
                    okText={'好的'}
                    cancelText={'算了'}
                    centered={true}
                >
                    您真的确定么？ 是否是三思后的操作？
                </Modal>
            </Fragment>
        );
    }
}

export default Modals;